<div class="query-builder">
	<div class="w-full h-full flex flex-column py-[10px]">
		<div class="flex w-full h-[50px] border-bottom-1 border-gray-400 pb-[10px] px-[15px]">
			<div class="flex text-blue-800 text-xl justify-center items-center">
				{{ shipInfo?.shipNameZh }}-{{shipInfo?.impVoyage}}
			</div>
			<div class="flex h-full w-[1px] bg-gray-300 mx-[30px]">

			</div>
			<div class="flex flex-1 justify-between">
				<div class="flex justify-center items-center text-lg">
					{{ shipInfo?.rtb }} |--------<img src="assets/img/ship.svg">--------|  {{ shipInfo?.rtd }}
				</div>
				<div class="flex mr-[30px] gap-5">
					<!--					<div class="w-auto h-auto border-blue-500 border-solid border-[1px] text-blue-500 rounded m-auto px-[10px] py-[5px]">-->
					<!--						<a>出口船航次详情</a>-->
					<!--					</div>-->
					<div class="w-auto h-auto border-blue-500 border-solid border-[1px] text-blue-500 rounded m-auto px-[10px] py-[5px]">
						<a>综合统计</a>
					</div>
				</div>
			</div>
		</div>

		<div>
			<form [formGroup]="searchForm" class="h" nz-form>
				<div class="flex w align-items-center h mt-[10px]">
					<div class="col-1-5 col-1-5-md">
						<nz-form-item nzFlex>
							<nz-form-label>单号</nz-form-label>
							<nz-form-control class="flex1">
								<input nz-input formControlName="billNo" />
							</nz-form-control>
						</nz-form-item>
					</div>
					<div class="col-1-5 col-1-5-md">
						<nz-form-item nzFlex>
							<nz-form-label>卸齐</nz-form-label>
							<nz-form-control class="flex1">
								<nz-select formControlName="isUnloadClear" nzShowSearch nzAllowClear>
									<nz-option *ngFor="let item of loadClearList" [nzValue]="item!.dictKey"
														 [nzLabel]="item!.dictValue"></nz-option>
								</nz-select>
							</nz-form-control>
						</nz-form-item>
					</div>
					<div class="col-1-5 col-1-5-md">
						<nz-form-item nzFlex>
							<nz-form-label>提清</nz-form-label>
							<nz-form-control class="flex1">
								<nz-select formControlName="isDeliveryClear" nzShowSearch nzAllowClear>
									<nz-option *ngFor="let item of loadClearList" [nzValue]="item!.dictKey"
														 [nzLabel]="item!.dictValue"></nz-option>
								</nz-select>
							</nz-form-control>
						</nz-form-item>
					</div>
					<div class="col-1-5 col-1-5-md">
						<nz-form-item nzFlex>
							<nz-form-label>状态</nz-form-label>
							<nz-form-control class="flex1">
								<nz-select formControlName="isFinish" nzShowSearch nzAllowClear>
									<nz-option *ngFor="let item of isFinishList" [nzValue]="item!.dictKey"
														 [nzLabel]="item!.dictValue"></nz-option>
								</nz-select>
							</nz-form-control>
						</nz-form-item>
					</div>
					<div class="col-1-5 col-1-5-md">
						<div class="flex">
							<button (click)="search()" class="mr10" nz-button nzType="primary">搜索</button>
							<button (click)="reset()" class="mr10" nz-button nzType="default">重置</button>
							<button (click)="export(shipInfo?.transportShipId)" class="mr10 btn-export" nz-button nzType="primary">导出</button>
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>

<nz-card [nzBodyStyle]="{ padding: '12px 12px 0px 12px' }" [nzBordered]="false" class="card-table"
				 style="min-height: calc(100vh - 250px)">
	<st
		#st
		[size]="'small'"
		class="hover-table fix-table st-odd-table"
		[resizable]="true"
		[scroll]="{ y: 'calc(100vh - 265px)' }"
		[data]="dataList"
		[columns]="columns"
		[page]="pageSetting"
		[total]="this.pageInfo.total"
		[ps]="this.pageInfo.size"
		[pi]="this.pageInfo.current"
		[loading]="this.pageInfo.loading"
		(change)="stChange($event)"
		[clickRowClassName]="sa"
		[footer]="total"
	>
		<ng-template st-row="billNo" let-item>
			<a class="underline text-blue-600" (click)="billDetail(item)">
				{{ item?.billNo }}
			</a>
		</ng-template>
		<ng-template st-row="isFinish" let-item>
			<div class="w h flex justify-center">
				<a class="w-[40px] h-[30px] border-1 border-black bg-gray-500 flex" (click)="changeIsFinish(item,'Y')" *ngIf="item.isImpFinish === 'N'">
					<span class="text-white text-center flex w h justify-center items-center">
						未结
					</span>
				</a>
				<a class="w-[40px] h-[30px] border-1 border-black bg-orange-500 flex" (click)="changeIsFinish(item,'Y')" *ngIf="item.isImpFinish === 'W'">
					<span class="text-white text-center flex w h justify-center items-center">
						待结
					</span>
				</a>
				<a class="w-[40px] h-[30px] border-1 border-black bg-green-500 flex" (click)="changeIsFinish(item,'N')" *ngIf="item.isImpFinish === 'Y'">
					<span class="text-white text-center flex w h justify-center items-center">
						完结
					</span>
				</a>
			</div>
		</ng-template>
		<ng-template st-row="isUnloadClear" let-item>
			<div
				style="margin: auto"
				[ngClass]="{ 'pass-icon': item?.isUnloadClear === 'Y', 'working-icon': item?.isUnloadClear === 'W', 'ban-icon': item?.isUnloadClear === 'N' }"
			></div>
		</ng-template>
		<ng-template st-row="isDeliveryClear" let-item>
			<div
				style="margin: auto"
				[ngClass]="{ 'pass-icon': item?.isDeliveryClear === 'Y', 'working-icon': item?.isDeliveryClear === 'W', 'ban-icon': item?.isDeliveryClear === 'N' }"
			></div>
		</ng-template>
		<ng-template st-row="manage" let-item>
			<a  nz-dropdown [nzDropdownMenu]="menu" class="text-black">
				操作
				<span nz-icon nzType="down"></span>
			</a>
			<nz-dropdown-menu #menu="nzDropdownMenu">
				<ul nz-menu>
					<li acl [acl-ability]="'leader-edit'" nz-menu-item (click)="edit(item)">修改</li>
					<li
						acl
						[acl-ability]="'checker-clear'"
						nz-menu-item
						nz-popconfirm
						nzPopconfirmTitle="确定清空此票？"
						(nzOnConfirm)="clear(item)"
						nzPopconfirmPlacement="bottom"
						style="color: #ff0000"
					>
						余货清空
					</li>
				</ul>
			</nz-dropdown-menu>
		</ng-template>
		<ng-template #total>
			<div class="flex w-full flex-col gap-3">
				<div class="flex w-full justify-end gap-5">
					<div class="flex">总件吨：{{ totalData?.allPiece }} / {{ totalData?.allTon }}</div>
					<div class="flex">卸船：{{ totalData?.inPiece }} / {{ totalData?.inTon }}</div>
					<div class="flex">提货：{{ totalData?.outPiece }} / {{ totalData?.outTon }}</div>
					<div class="flex">直提：{{ totalData?.directOutPiece }} / {{ totalData?.directOutTon }}</div>
					<div class="flex">库存：{{ totalData?.storagePiece }} / {{ totalData?.storageTon }}</div>
				</div>
				<div class="flex w-full justify-end gap-5">
					<div class="flex">转入：{{ totalData?.transferInPiece }} / {{ totalData?.transferInTon }}</div>
					<div class="flex">转出：{{ totalData?.transferOutPiece }} / {{ totalData?.transferOutTon }}</div>
				</div>
			</div>
		</ng-template>
	</st>
</nz-card>

